<template>
    <div>
        <h1 style="text-align: left;">个人所得税税率表</h1><br>
        
        <el-form :model="formData" ref="form" :rules="rules" label-width="80px" :inline="true" style="display: flex; flex-direction: column; gap: 16px; text-align: left;">
            
            <el-form-item label="">
                
                <el-row :gutter="20" style="width: 100%;">
                    <el-col :span="12" :offset="0">
                        <span>应纳税所得额下限（元）</span>
                        <el-input v-model="formData.lowerLimit"></el-input>
                        <span>应纳税所得额上限（元）</span>
                        <el-input v-model="formData.upperLimit"></el-input>
                        <span>税率（%）</span>
                        <el-input v-model="formData.rate"></el-input>
                        <span>是否启用(1：启用、2：禁用)<br></br></span>
                        <el-radio-group v-model="formData.enable">
                        <el-radio label="启用" value="启用">启用</el-radio>
                        <el-radio label="禁用" value="禁用">禁用</el-radio>
        </el-radio-group>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        
                    </el-col>                       
                </el-row>
                
                       
                                
            </el-form-item>
            <el-form-item  style="margin-top: auto; align-self: flex-start;">
                <el-button type="primary" @click="onSubmit">提交</el-button>
                
            </el-form-item>
        </el-form>
        
        
    </div>
</template>

<script setup>
import { ref,defineEmits } from 'vue';
import request from '@/api/request.js'

let emits=defineEmits(['ref-table'])
let props=defineProps(["data"])

let formData = ref({
    ...props.data,
    enable: props.data?.enable !== undefined ? String(props.data.enable) : '启用'
})
const onSubmit = () => {
    request({
        url: '/salary/setup/rate/update',
        method: 'put',
        data: formData.value
    }).then(res => {
        emits('ref-table');//刷新列表
    })
}
</script>

<style scoped>

</style>
